<template>
    <div class="login">
        <mTitle :title="title"></mTitle>
        <div class="login-wrapper" ref="loginWrapper">
            <div class="login-phone">
                <span class="text">手机</span>
                <input type="text" @blur="blurPhone" v-model="inputPhone" class="input-phone" placeholder="请填写完整的手机号码" />
            </div>
            <div class="login-sex">
                <span class="text">性别</span>
                <input type="text" @click="handleClickSex" v-model="inputSex" class="input-sex" readonly="readonly" placeholder="点击选择性别" />
            </div>
            <div class="login-age">
                <span class="text">年龄</span>
                <input type="text" @blur="blurAge" v-model="inputAge" class="input-age" placeholder="请填写年龄" />
            </div>
            <div class="login-address">
                <span class="text">常住地区</span>
                <input type="text" v-model="inputAddress" class="input-address" placeholder="点击选择常住地区" readonly="readonly" @click="changeAddress" />
            </div>
            <div class="login-text">
                <div class="text-title">
                    <h6 class="text">各级文化（群艺馆）工作人员</h6>
                    <van-switch-cell v-model="checked" title="" />
                </div>
                <textarea class="text-container" v-show="checked" placeholder="请填写完整的单位名称" v-model="textareaVal"></textarea>
            </div>
        </div>
        <div class="login-btnWrapper" ref="detailButton">
            <a href="javascript:;" class="login-cancel-btn login-btn" @click="loginCancel">取消</a>
            <a href="javascript:;" class="login-sure-btn login-btn" @click="loginSubmit">确定</a>
        </div>
        <!-- 弹出层 -->
        <van-popup v-model="mskShow" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="selectVal"
              @cancel="mskShow = false"
              @change="onChange"
            />
        </van-popup>
        <!-- 选择性别 -->
        <van-actionsheet v-model="mskShowSex" :actions="actions" cancel-text="取消" />
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Loading from 'base/loading/loading'
    import {Toast} from 'vant'
    import {Dialog} from 'vant'
    import { mapState,mapMutations } from 'Vuex'
    // 湖北省城市数据
    const citys = {
        '武汉市': ['江岸区', '江汉区', '硚口区', '汉阳区', '武昌区','青山区','洪山区','东西湖区','汉南区','蔡甸区','江夏区','黄陂区','新洲区','武汉经济技术开发区'],
        '黄石市': ['黄石港区', '西塞山区', '下陆区', '铁山区', '阳新县','大冶市','黄石经济技术开发区'],
        '十堰市': ['茅箭区', '张湾区', '郧阳区', '郧西县', '竹山县','竹溪县','房县','丹江口市'],
        '宜昌市': ['西陵区', '伍家岗区', '点军区', '猇亭区', '夷陵区','远安县','兴山县','秭归县','长阳土家族自治县','五峰土家族自治县','宜都市','当阳市','枝江市','经济开发区'],
        '襄阳市': ['襄城区', '樊城区', '襄州区', '南漳县', '谷城县','保康县','老河口市','枣阳市','宜城市'],
        '鄂州市': ['梁子湖区', '华容区', '鄂城区'],
        '荆门市': ['东宝区', '掇刀区', '京山县', '沙洋县', '钟祥市'],
        '孝感市': ['孝南区', '孝昌县', '大悟县', '云梦县', '应城市','安陆市','汉川市'],
        '荆州市': ['沙市区', '荆州区', '公安县', '监利县', '江陵县','石首市','洪湖市','松滋市'],
        '黄冈市': ['黄州区', '团风县', '红安县', '罗田县', '英山县','浠水县','蕲春县','黄梅县','麻城市','武穴市'],
        '咸宁市': ['咸安区', '嘉鱼县', '通城县', '崇阳县', '通山县','赤壁市'],
        '随州市': ['曾都区', '随县', '广水市', '罗田县', '英山县','浠水县','蕲春县','黄梅县','麻城市','武穴市'],
        '恩施土家族苗族自治州': ['恩施市', '利川市', '建始县', '巴东县', '宣恩县','咸丰县','来凤县','鹤峰县'],
        '省直辖县': ['仙桃市', '潜江市', '天门市', '神农架林区']
    }
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
    export default {
        data () {
            return {
                title: '新用户绑定手机',
                inputPhone: '',
                inputSex: '',
                inputAge: '',
                inputAddress: '',
                textareaVal: '',
                mskShow: false,
                mskShowSex: false,
                checked: false,
                isLogin: false,
                columns: [
                    {
                      values: Object.keys(citys),
                      className: 'column1'
                    },
                    {
                      values: citys['武汉市'],
                      className: 'column2',
                      defaultIndex: 0
                    }
                ],
                actions: [
                    {
                        name: '男',
                        callback: this.handleClick
                    },
                    {
                        name: '女',
                        callback: this.handleClick
                    }
                ]
            }
        },
        methods: {
            changeAddress () {
                this.mskShow = true
            },
            selectVal (value, index) {
                this.inputAddress = value[0] + value[1]
                this.mskShow = false
            },
            onChange (picker, values) {
                picker.setColumnValues(1, citys[values[0]]);
            },
            handleClick (picker, value) {
                this.inputSex = picker.name
                this.mskShowSex = false
            },
            // 判断手机号
            blurPhone () {
                if (this.inputPhone === "") {
                    Toast('手机号不能为空！')
                    return false
                }
                if (!this.checkphone(this.inputPhone)) {
                    Toast('手机号格式不正确！')
                    return false
                }
                return true
            },
            // 选择性别
            handleClickSex () {
                this.mskShowSex = !this.mskShowSex
            },
            // 判断年龄
            blurAge () {
                if (this.inputAge === "") {
                    Toast('年龄不能为空！')
                    return false
                }
                if (!this.checkNumber(this.inputAge)) {
                    Toast('年龄必须为数字！')
                    this.inputAge = ""
                    return false
                }
                return true
            },
            // 取消提交
            loginCancel () {
                if (this.inputPhone === "" && this.inputSex === "" && this.inputAge === "" && this.inputAddress === "") {
                    return
                }
                Dialog.confirm({
                  title: '是否取消',
                  message: '确认之后，所有信息将会被清空！'
                }).then(() => {
                    Toast.success('已取消')
                    this.inputPhone = ""
                    this.inputSex = ""
                    this.inputAge = ""
                    this.inputAddress = ""
                    this.checked = false
                    this.textareaVal = ""
                }).catch(() => {
                    Dialog.close()
                });
            },
            // 根据页面resize判断键盘展开收起状态
            handleResize () {
                var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight
                // 键盘展开
                if (clientHeight > nowClientHeight) {
                    // this.$refs.detailContainer.style.display = 'none'
                    this.$refs.detailButton.style.display = 'none'
                } else {// 键盘收起
                    // this.$refs.detailContainer.style.display = 'block'
                    setTimeout(() => {
                        this.$refs.detailButton.style.display = 'block'
                    },200)
                } 
            },
            // 确认提交
            loginSubmit () {
                if (this.blurPhone() && this.blurAge()) {
                    if (this.inputSex === "") {
                        Toast('性别不能为空！')
                        return
                    }
                    if (this.inputAddress === "") {
                        Toast('常住地区不能为空！')
                        return
                    }
                    if(this.checked && this.textareaVal === "") {
                        Toast('单位名称不能为空！')
                        return
                    }
                    this.isLogin = true
                    this.changeLogin(this.isLogin)
                    this.changePhone(this.inputPhone)
                    // 成功跳转
					axios.post('/api/index.php?g=Api&m=Ucenter&a=binduser', {
					   openid: localStorage.getItem("openid"),
						mid: localStorage.getItem("memberid"),
						phone: this.inputPhone,
						sex:this.inputSex,
						age:this.inputAge,
						area:this.inputAddress,
						isworker:this.checked,
						company:this.textareaVal
					}).then((res) => {
						if(res.data.rescode=='0000'){
							this.$router.push({path: '/mine'})
						}else{
							Toast('您提交的信息有误，无法绑定！')
						}
					}).catch(function (error) {
						console.log(error)
					})
                }
            },
            // 验证手机号
            checkphone (phone) {
                if (!(/^1[34578]\d{9}$/.test(phone))||phone=="") {
                    return false
                } else {
                    return true
                }
            },
            // 验证数字
            checkNumber (num) {
                if (!(/^[0-9]*$/.test(num))) {
                    return false
                } else {
                    return true
                }
            },
            ...mapMutations(['changeLogin','changePhone'])
        },
        mounted () {
            window.addEventListener('resize', this.handleResize)
        },
        components: {mTitle,Loading},
		created () {
			localStorage.setItem('openid',this.$route.query.openid);
			localStorage.setItem('memberid',this.$route.query.mid);
        }
    }
</script>

<style lang="stylus" scoped>
    .text-title >>> .van-hairline--top-bottom
        border: none
    .login
        width: 100%
        height: 100%
        position: relative
        overflow: hidden
        background: #fff
        .login-btnWrapper
            position: absolute
            width: 100%
            bottom: 30px
            padding: 0 20px
            box-sizing: border-box
            height: 34px
            .login-btn
                display: inline-block
                width: 40%
                margin-left: 7%
                height: 34px
                background: #aaaaaa
                color: #fff
                font-size: 16px
                text-align: center
                line-height: 34px
                border-radius: 20px
                &.login-cancel-btn
                    margin-right: 10px
                &.login-sure-btn
                    margin-left: 10px
                    background: #f8624a
        .login-wrapper
            padding: 0 20px
            box-sizing: border-box
            width: 100%
            .login-phone,.login-sex,.login-age,.login-address
                width: 100%
                height: 38px
                font-size: 0
                display: flex
                align-items: center
                margin-top: 20px
                .text
                    font-size: 16px
                    display: inline-block
                    font-size: 16px
                    color: #000
                    flex: 0 0 64px
                    width: 64px
                    text-align: right
                .input-phone,.input-sex,.input-age,.input-address
                    flex: 1
                    border-radius: 0
                    border-bottom: 1px solid #eee
                    height: 34px
                    line-height: 34px
                    font-size: 16px
                    padding: 0 10px
                    box-sizing: border-box
                    margin-left: 12px
                    width: 100%
                    overflow: hidden
            .login-text
                margin-top: 20px
                .text-title
                    display: flex
                    align-items: center
                    .text
                        display: inline-block
                        flex: 1
                    .van-switch-cell
                        display: inline-block
                        flex: 0 0 50px
                        padding: 0
                        width: 50px
                .text-container
                    width: 100%
                    height: 100px
                    border-radius: 0
                    margin-top: 20px
                    border-radius: 6px
                    padding: 10px
                    box-sizing: border-box
</style>